<div class="search-component">
  <h4>Hero Search</h4>
  <input #searchBox id="search-box" (keyup)="search(searchBox.value)"/>
  <ul class="search-result">
    <li *ngFor="let hero of heroes$ | async">
        <a routerLink="/detail/{{hero.id}}">{{hero.name}}</a>
    </li>
  </ul>
</div>